import { compileMdx } from 'nextra/compile'
import { Callout } from 'nextra/components'
import { MDXRemote } from 'nextra/mdx-remote'

# MDX

With Nextra, all your `.md` and `.mdx` files under the pages directory will be
rendered with [MDX](https://mdxjs.com/about), it's an advanced Markdown format
with React component support.

You can use import and use React components inside your Markdown files like
this:

export async function Demo() {
  const mdx = `import { Callout } from 'nextra/components'

**Markdown With React Components**

<Callout emoji="✅">
  **MDX** (the library), at its core, transforms MDX (the syntax) to JSX. It
  receives an MDX string and outputs a _JSX string_. It does this by parsing the
  MDX document to a syntax tree and then generates a JSX document from that
  tree.
</Callout>`
  const rawJs = await compileMdx(`~~~mdx filename="example.mdx"
${mdx}
~~~

Generates:

${mdx}`)
  return <MDXRemote compiledSource={rawJs} components={{ Callout }} />
}

<Demo />

## Headings

# **Hello**, This Is a _Title_ Inside `h1`

## **Hello**, This Is a _Title_ Inside `h2`

### **Hello**, This Is a _Title_ Inside `h3`

#### **Hello**, This Is a _Title_ Inside `h4`

##### **Hello**, This Is a _Title_ Inside `h5`

###### **Hello**, This Is a _Title_ Inside `h6`

## List

1. one
1. two
1. three

- one
- two
- three

## Task List

```mdx
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
```

Renders

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

## Syntax Highlighting

Automatic syntax highlighting

````mdx
```js
console.log('hello, world')
```
````

Renders:

```js
console.log('hello, world')
```

You can also add the `{line|range}` modifier to highlight specific lines:

````mdx
```jsx {4,6-8}
import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}
```
````

```jsx {4,6-8}
import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}
```

## Inline Code

You can use \`content\` to wrap inline code content like: `let x = 1`.

## Blockquote

> Where some people measure progress in answers-right per test or tests-passed
> per year, we are more interested in Sistine-Chapel-Ceilings per Lifetime.
>
> — Alan Kay, A Personal Computer for Children of All Ages

Nested quotes:

> > Where some people measure progress in answers-right per test or tests-passed
> > per year, we are more interested in Sistine-Chapel-Ceilings per Lifetime.
> >
> > — Alan Kay, A Personal Computer for Children of All Ages
>
> This is **great**.
>
> — Shu Ding.

## Table

| Syntax        | Description |   Test Text |
| :------------ | :---------: | ----------: |
| Header        |    Title    | Here's this |
| Paragraph     |    Text     |    And more |
| Strikethrough |             |    ~~Text~~ |

## React Components

React components and Markdown can be **mixed together**, for instance:

```mdx
<Callout>Give [**Nextra**](https://github.com/shuding/nextra) a star!</Callout>
```

Renders:

<Callout>Give [**Nextra**](https://github.com/shuding/nextra) a star!</Callout>
